<template>
  <view class="container">
    <!-- 顶部通知栏 -->
    <view class="notification-bar"></view>
    
    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 图片展示区 -->
      <view class="image-container">
        <image :src="image.image" mode="aspectFit" @click="previewImage"></image>
      </view>
      
      <!-- 用户信息区 -->
      <view class="user-info">
        <!-- 头像和用户名水平排列 -->
        <view class="avatar-container">
          <image class="avatar" :src="author.avatar" mode="aspectFill"></image>
          <text class="username" style="margin-left: 10rpx;">{{author.username}}</text>
        </view>
        
        <!-- 描述 -->
        <view class="description">{{ image.title }}</view>
        
        <!-- 复制按钮 -->
        <view class="copy-button" @click="copyText">
          <text class="copy-icon">📋</text>
          <text class="copy-text">复制</text>
        </view>
      </view>
    </view>
    
    <!-- 底部保存按钮 -->
    <view class="save-button-container">
      <button class="save-button" @click="saveImage">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 定义响应式数据
const image = ref({});
const imageUrl = ref(''); // 存储图片 URL

// 预览图片
const previewImage = () => {
  /* #ifdef H5 */
  // H5 环境下使用浏览器的图片预览功能
  window.open(image.value.image);
  /* #endif */
  
  /* #ifdef APP */
  // App 环境下使用 uni.previewImage API
  uni.previewImage({
    urls: [image.value.image],
    current: image.value.image
  });
  /* #endif */
};

// 复制文字功能
const copyText = () => {
  /* #ifdef H5 */
  navigator.clipboard.writeText(image.value.title).then(() => {
    uni.showToast({
      title: '复制成功',
      icon: 'none'
    });
  }).catch(err => {
    console.error('复制失败:', err);
    uni.showToast({
      title: '复制失败',
      icon: 'none'
    });
  });
  /* #endif */
  
  /* #ifdef APP */
  uni.setClipboardData({
    data: image.value.title,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      });
    },
    fail: function (err) {
      console.error('复制失败:', err);
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      });
    }
  });
  /* #endif */
};

// 保存图片功能
const saveImage = () => {
  uni.downloadFile({
      url: image.value.image,
      success: (res) => {
          if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: () => {
                      uni.showToast({
                          title: "图片已保存",
                          icon: "none"
                      })
  					//进行文件上传
  					upload(filePath)
                  },
                  fail: (err) => {
                      console.error("保存图片失败:", err)
                  }
              })
          }
      },
      fail: (err) => {
          console.error("下载图片失败:", err)
      }
  })
};

// 页面加载时处理传入的数据
const author = ref({})
onLoad((query) => {
  if (query.data) {
    const data = JSON.parse(decodeURIComponent(query.data));
    if (data.author) {
       author.value = data.author
    }
    image.value = data;
  }
});
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.notification-bar {
  width: 100%;
  height: var(--status-bar-height);
  background-color: #f8f8f8;
  position: fixed;
  top: 0;
  z-index: 100;
}

.main-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-top: var(--status-bar-height);
}

.image-container {
  width: 100%;
  height: 500rpx;
  background-color: #f5f5f5;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}

.image-container image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.avatar-container {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.avatar-container image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  overflow: hidden;
}

.username {
  font-size: 28rpx;
  margin-left: 10rpx;
}

.description {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20rpx;
}

.copy-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  width: fit-content;
  margin-left: auto;
}

.copy-icon {
  font-size: 30rpx;
  margin-right: 8rpx;
}

.copy-text {
  font-size: 28rpx;
}

.save-button-container {
  width: 100%;
  padding: 30rpx 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.save-button {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  border: none;
  border-radius: 40rpx;
  color: white;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
</style>